<script setup lang="ts">
import { reactive, ref } from 'vue'

defineProps({
  gutter: {
    type: Number,
    default: 24,
  },
  tableProps: {
    type: Array,
    default: () => [],
  },
})

const arr = ref([])
const formData = reactive<Record<string, any>>({})
</script>

<template>
  <el-row :gutter="gutter">
    <el-col
      v-for="(item, index) in tableProps"
      :key="index"
      :class="item.class"
      :span="item.span"
    >
      <el-input
        v-if="item.renderType === 'input'"
        v-model="formData[item.key]"
        :placeholder="item.placeholder"
        :disabled="item.disabled"
      ></el-input>
      <el-input
        v-else-if="item.renderType === 'textarea'"
        v-model="formData[item.key]"
        :placeholder="item.placeholder"
        :disabled="item.disabled"
        type="textarea"
      ></el-input>
      <el-radio-group
        v-else-if="item.renderType === 'radio'"
        v-model="formData[item.key]"
      >
        <el-radio
          v-for="option in item.options"
          :label="option.value"
          :key="option.value"
          :disabled="option.disabled"
          >{{ option.label }}</el-radio
        >
      </el-radio-group>
      <el-checkbox-group
        v-else-if="item.renderType === 'checkbox'"
        v-model="arr"
      >
        <el-checkbox
          v-for="option in item.options"
          :label="option.value"
          :key="option.value"
          :disabled="option.disabled"
          >{{ option.label
          }}<el-input
            v-if="option.input"
            v-model="formData[item.key]"
            placeholder="请输入"
          ></el-input>
        </el-checkbox>
      </el-checkbox-group>
      <el-select
        v-else-if="item.renderType === 'select'"
        v-model="formData[item.key]"
        :placeholder="item.placeholder"
        :disabled="item.disabled"
      >
        <el-option
          v-for="option in item.options"
          :label="option.label"
          :value="option.value"
          :key="option.value"
          :disabled="option.disabled"
        ></el-option>
      </el-select>
      <el-date-picker
        v-else-if="item.renderType === 'date'"
        v-model="formData[item.key]"
        type="date"
        placeholder="选择日期"
        :disabled="item.disabled"
      ></el-date-picker>
      <el-date-picker
        v-else-if="item.renderType === 'year'"
        v-model="formData[item.key]"
        type="year"
        placeholder="选择年"
        :disabled="item.disabled"
      ></el-date-picker>
      <el-date-picker
        v-else-if="item.renderType === 'month'"
        v-model="formData[item.key]"
        type="month"
        placeholder="选择月"
        :disabled="item.disabled"
      ></el-date-picker>
      <div class="common-render" v-else-if="item.renderType === 'render'">
        <slot :name="item.key"></slot>
      </div>
      <span v-else>{{ item.label }}</span>
    </el-col>
  </el-row>
</template>

<style scoped lang="scss">
.el-row {
  .el-col {
    height: 40px;
  }

  .common-render {
    width: 100%;
    height: 40px;
  }
}
</style>
